<template>
  <el-card>
    <bread-crumb slot="header">
      <template slot="title">发布分店</template>
    </bread-crumb>
    <el-form
      ref="publishForm"
      :rules="publishRules"
      :model="params"
      label-width="120px"
      style="margin-left:0px"
    >
      <!-- 表单 -->
      <!-- 分店城市部分 -->
      <el-form-item label="分店城市" prop="area">
        <el-input v-model="params.area" style="width:300px"></el-input>
      </el-form-item>
      <!-- 店名部分 -->
      <el-form-item label="店名" prop="salesname">
        <el-input v-model="params.salesname" style="width:300px"></el-input>
      </el-form-item>
      <!-- 分店具体地址部分 -->
      <el-form-item label="分店具体地址" prop="addr">
        <el-input v-model="params.addr" style="width:300px"></el-input>
      </el-form-item>
      <!-- 分店开业时间 -->
      <el-form-item label="分店开业时间" prop="opentime">
        <el-date-picker
          v-model="params.opentime"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <!-- 封面部分 -->
      <el-form-item prop="cover" label="图片">
        <!-- 选择图片 -->
        <div class="add_area">
          <div @click="add_image" class="plus_icon">
            <img
              v-if="this.params.file"
              style="width:100%;height:100%;"
              :src="params.file"
              class="preview_img"
            />
            <div class="filediv" ref="file1">
              <input
                ref="file"
                type="file"
                @change="get_file"
                accept="image/*"
                name="imgUrls"
                value="file1"
              />
              <i></i>
              <i></i>
            </div>
          </div>
        </div>
      </el-form-item>

      <!-- 发布文章与存入草稿 按钮 -->
      <el-form-item>
        <el-button @click="uploadNewStore" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { uploadStore } from "../../utils/api";
export default {
  data() {
    return {
      editorOption: {
        placeholder: "输入正文内容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ header: 1 }, { header: 2 }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            ["link", "image"]
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        }
      },
      publishRules: {
        // 发布规则
        area: [
          { required: true, message: "请输入内容", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        addr: [
          { required: true, message: "请输入内容", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        salesname: [
          { required: true, message: "请输入内容", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        opentime: [
          { required: true, message: "请输入内容", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      params: {
        area: "",
        addr: "",
        salesname: "",
        opentime: "",
        file: ""
      },
      paramsForm: ""
    };
  },
  watch: {
    params: {
      handler(val) {
        this.paramsForm.set("area", val.area);
        this.paramsForm.set("addr", val.addr);
        this.paramsForm.set("salesname", val.salesname);
        this.paramsForm.set("opentime", val.opentime);
        // this.paramsForm.set("file", val.file);
      },
      deep: true
    }
  },
  methods: {
    // 上传新门店信息
    uploadNewStore() {
      uploadStore(this.paramsForm).then(res => {
        console.log(res);
        this.$message("上传成功");
      });
    },
    // 获取选择的图片
    get_file() {
      const files = this.$refs.file.files[0];

      this.paramsForm.has("file") &&
        this.paramsForm.set("file", files);
      if (!this.paramsForm.has("file")) {
        this.paramsForm.append("file", files);
      }
      const imageUrl = URL.createObjectURL(files);
      this.params.file = imageUrl;
      console.log(this.paramsForm.get("file"));
    },
    // 选择图片
    add_image() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
      // const temp = {
      //   url:
      //     "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      //   title: "默认",
      //   content: "默认",
      //   price: "默认"
      // };
      // this.hotbaozi_list.push(temp);
    },
    // 保存新闻
    // saveNews() {
    //   journalismAdd(this.paramsForm).then(res => {
    //     console.log(res.data.results);
    //   });
    // },
    changImg(url, index) {
      // 接收从子组件传来的值
      // 数据经历了两层传递 更改 images 的数据
      this.formData.cover.images = this.formData.cover.images.map(function(
        item,
        i
      ) {
        return index === i ? url : item;
      });
    },
    // radio类型改变事件
    changeType() {
      //   alert(this.formData.cover.type) // 显示当前radio-type选项
      if (this.formData.cover.type === 1) {
        // 当type为1 图片数组有一个
        // image地址不能是本地的图片
        this.formData.cover.images = [
          "http://toutiao.meiduo.site/FmavYB5dTWpnf3X8Uo5eBdK7BRMW"
        ];
      } else if (this.formData.cover.type === 3) {
        // 当type为3 图片数组有三个
        this.formData.cover.images = ["", "", ""];
      } else {
        //   否则图拼啊数组没有值
        this.formData.cover.images = [];
      }
    },
    getChannels() {
      this.$axios({
        url: "/channels"
      }).then(result => {
        // debugger
        this.channels = result.data.data.channels;
      });
    }
  },
  created() {
    this.paramsForm = new FormData();
    this.paramsForm.append("area", "");
    this.paramsForm.append("addr", "");
    this.paramsForm.append("salesname", "");
    this.paramsForm.append("opentime", "");
    this.paramsForm.append("file", "");
  }
};
</script>

<style lang="less" scoped>
.add_area {
  width: 100%;
  height: 342px;
  background: #f1f1f1;
  box-sizing: border-box;
  border: 1px dashed #e1e1e1;

  .plus_icon {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    .filediv {
      z-index: 3;
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      input {
        position: absolute;
        top: 0;
        left: -100%;
      }
      i {
        position: absolute;
        width: 1%;
        height: 30%;
        background: #919191;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &:last-child {
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
    }
  }
}
</style>
